

function playbackPopupButtonHandler(e)
{
	var dctk = connected.toolkit;

	switch(e.buttonId)
	{
		case dcKeyEvent.BUTTON_ID_BACK:
		{
			dctk.dismissPopup();
		}
		break;
		
		case dcKeyEvent.BUTTON_ID_INFO:
		{
			dctk.dismissPopup();
			showInfoPopup();
		}
		break;
		
		case dcKeyEvent.BUTTON_ID_UP:
		{
			var descTxt = dctk.getElementById("descTxt");
			descTxt.scrollUp();
		}
		break;

		case dcKeyEvent.BUTTON_ID_DOWN:
		{
			var descTxt = dctk.getElementById("descTxt");
			descTxt.scrollDown();
		}
		break;

	}
}


function showPlaybackPopup()
{
    var dctk = connected.toolkit;
    
    // create a new panel for the popup
    var popup = dctk.createPanelCtrl("popup", true);
    popup.width = 600;
    popup.height = 440;
    popup.outlined = true;
    popup.filled = true;
    popup.color.rgb = 0x000000;
    popup.color.a = 192;
    popup.onUnhandledKeyEvent = playbackPopupButtonHandler;
	
	var height = connected.outputHeight;
 	var width = connected.outputWidth;
	if (width/height >= 16/9) {
		fontSize = 22; //16:9
		titleFont = 32;
 		}
 	else 
		fontSize = 16; //4:3
		titleFont = 28;
	
    
    var popupTitleTxt = dctk.createLabelCtrl("popupTitleTxt", true);
    popupTitleTxt.setRect(20, 385, 580, 425);
    popupTitleTxt.textColor.rgb = 0xCDCDCD;
    popupTitleTxt.fontSize = titleFont;
	popupTitleTxt.align = dctkLabel.TS_LEFT;
	popupTitleTxt.valign = dctkLabel.TS_MIDDLE;
    popupTitleTxt.text = main;
    popup.addChild(popupTitleTxt);
	
	var mpaaLabel = dctk.createLabelCtrl("mpaaLabel", true);
    mpaaLabel.setRect(20, 360, 100, 380);
    mpaaLabel.textColor.rgb = 0xCDCDCD;
    mpaaLabel.fontSize = fontSize;
	mpaaLabel.align = dctkLabel.TS_RIGHT;
	mpaaLabel.valign = dctkLabel.TS_MIDDLE;
    mpaaLabel.text = "MPAA: ";
    popup.addChild(mpaaLabel);
	
	var mpaaImg = dctk.createImageCtrl("mpaaImg", true);
	mpaaImg.setRect(100, 357, 130, 383);
	mpaaImg.style = dctkIImage.IMAGE_STYLE_FILL;
	//mpaaImg.img.src = "0.png";
	popup.addChild(mpaaImg);
	
/*
	var metaTxt = dctk.createLabelCtrl("metaTxt", true);
    metaTxt.setRect(100, 360, 345, 380);
    metaTxt.textColor.rgb = 0xCDCDCD;
    metaTxt.fontSize = fontSize;
	metaTxt.align = dctkLabel.TS_LEFT;
	metaTxt.valign = dctkLabel.TS_MIDDLE;
    metaTxt.text = " ";
    popup.addChild(metaTxt);
*/
	
	var genreLabel = dctk.createLabelCtrl("genreLabel", true);
    genreLabel.setRect(20, 335, 100, 355);
    genreLabel.textColor.rgb = 0xCDCDCD;
    genreLabel.fontSize = fontSize;
	genreLabel.align = dctkLabel.TS_RIGHT;
	genreLabel.valign = dctkLabel.TS_MIDDLE;
    genreLabel.text = "Genre: ";
    popup.addChild(genreLabel);
	
	var genreTxt = dctk.createLabelCtrl("genreTxt", true);
    genreTxt.setRect(100, 335, 345, 355);
    genreTxt.textColor.rgb = 0xCDCDCD;
    genreTxt.fontSize = fontSize;
	genreTxt.align = dctkLabel.TS_LEFT;
	genreTxt.valign = dctkLabel.TS_MIDDLE;
    genreTxt.text = " ";
    popup.addChild(genreTxt);
	
	var releasedLabel = dctk.createLabelCtrl("releasedLabel", true);
    releasedLabel.setRect(20, 310, 100, 330);
    releasedLabel.textColor.rgb = 0xCDCDCD;
    releasedLabel.fontSize = fontSize;
	releasedLabel.align = dctkLabel.TS_RIGHT;
	releasedLabel.valign = dctkLabel.TS_MIDDLE;
    releasedLabel.text = "Released: ";
    popup.addChild(releasedLabel);
	
	var releasedTxt = dctk.createLabelCtrl("releasedTxt", true);
    releasedTxt.setRect(100, 310, 345, 330);
    releasedTxt.textColor.rgb = 0xCDCDCD;
    releasedTxt.fontSize = fontSize;
	releasedTxt.align = dctkLabel.TS_LEFT;
	releasedTxt.valign = dctkLabel.TS_MIDDLE;
    releasedTxt.text = " ";
    popup.addChild(releasedTxt);

	var starsLabel = dctk.createLabelCtrl("starsLabel", true);
    starsLabel.setRect(20, 285, 100, 305);
    starsLabel.textColor.rgb = 0xCDCDCD;
    starsLabel.fontSize = fontSize;
	starsLabel.align = dctkLabel.TS_RIGHT;
	starsLabel.valign = dctkLabel.TS_MIDDLE;
    starsLabel.text = "Rating: ";
    popup.addChild(starsLabel);
	
	var stars = dctk.createImageCtrl("stars", true);
	stars.setRect(100, 280, 175, 310);
	stars.img.src = "0.png";
	popup.addChild(stars);
	
	var descLabel = dctk.createLabelCtrl("descLabel", true);
    descLabel.setRect(20, 260, 100, 280);
    descLabel.textColor.rgb = 0xCDCDCD;
    descLabel.fontSize = fontSize;
	descLabel.align = dctkLabel.TS_RIGHT;
	descLabel.valign = dctkLabel.TS_MIDDLE;
    descLabel.text = "Description: ";
    popup.addChild(descLabel);
	
	var descTxt = dctk.createLabelCtrl("descTxt", true);
    descTxt.setRect(60, 60, 325, 255);
    descTxt.textColor.rgb = 0xCDCDCD;
    descTxt.fontSize = fontSize;
	descTxt.align = dctkLabel.TS_LEFT;
	descTxt.valign = dctkLabel.TS_TOP;
	descTxt.multiline = true;
	descTxt.vertScroll = true;
    descTxt.text = "Loading... ";
    popup.addChild(descTxt);
	
	var playThumb = dctk.createImageCtrl("playThumb", true);
	playThumb.setRect(350, 80, 580, 400);
	//playThumb.color.alpha = 0x33;
	playThumb.img.src = playDesc;
	popup.addChild(playThumb);
	
	var playBtn = dctk.createButtonCtrl("playBtn", true);
	playBtn.setRect(20, 20, 130, 50);
	playBtn.text = "Play";
	playBtn.fontSize = 24;
	playBtn.onSelect = function(e) { redirectVideo(); dctk.dismissPopup(); }
	popup.addChild(playBtn);
	
	var backBtn = dctk.createButtonCtrl("backBtn", true);
	backBtn.setRect(470, 20, 580, 50);
	backBtn.text = "Back";
	backBtn.fontSize = 24;
	backBtn.onSelect = function(e) { dctk.dismissPopup(); }
	popup.addChild(backBtn);
	
/*
	var popupDateTxt = dctk.createLabelCtrl("popupDateTxt", true);
    popupDateTxt.setRect(0, 45, 320, 55);
    popupDateTxt.textColor.rgb = 0xCDCDCD;
    popupDateTxt.fontSize = 14;
	popupDateTxt.align = dctkLabel.TS_CENTER;
	popupDateTxt.valign = dctkLabel.TS_MIDDLE;
    popupDateTxt.text = playDate;
    popup.addChild(popupDateTxt);
*/
	    
  startMetadataRequest();
    // show the popup
    dctk.invokePopup(popup);
	
	playBtn.rightSibling = backBtn;
	backBtn.leftSibling = playBtn;
	
	dctk.focusedElement = playBtn;
	//connected.toolkit.debug.drawElementOutline = true;
    }
